<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
	xmlns:c="http://java.sun.com/jsp/jstl/core"
	template="web/templates/lg.xhtml">

	<ui:define name="title">
		<h:outputText value="#{configuracionService.tituloSistemaTexto}"/>
	</ui:define>
	<ui:define name="customStyle">
		<h:outputStylesheet library="css" name="animate.css"></h:outputStylesheet>
	</ui:define>
	<ui:define name="body">
		<div class="container">
			<div class="iso animated fadeInLeft"></div>
			<h:form id="login" styleClass="loginForm animated fadeInLeft">
				<p:panel>
					<p:messages id="messages" autoUpdate="true" />
					<p:fieldset>
						<div class="fieldsetTitle">
							<h3>Bienvenido</h3>
						</div>
						<div class="form-group">
							<div class="inner">
								<p:outputLabel>
									<span class="glyphicon glyphicon-user"></span>
								</p:outputLabel>
								<p:inputText styleClass="form-control"
									value="#{loginService.txtUsuario}" required="true"
									requiredMessage="El campo 'usuario' es Obligatorio."
									placeholder="Ingrese su Usuario" id="txtUsuario" maxlength="20"
									label="Usuario"></p:inputText>
							</div>
						</div>
						<div class="form-group">
							<div class="inner">
								<p:outputLabel>
									<span class="glyphicon glyphicon-lock"></span>
								</p:outputLabel>
								<p:password styleClass="form-control text-transform-none"
									value="#{loginService.txtClave}" id="txtClave"
									label="Contraseña" required="true" maxlength="20"
									requiredMessage="El campo 'contraseña' es Obligatorio."
									placeholder="Ingrese su contraseña"></p:password>
							</div>
						</div>
<!-- 						<div class="form-group"> -->
<!-- 							<p:captcha id="captcha" theme="white" ajax="false" language="es"  -->
<!-- 								requiredMessage="Código de captcha incorrecto." -->
<!-- 								validatorMessage="Código de captcha incorrecto."></p:captcha> -->
<!-- 						</div> -->
						<div class="form-group">
							<div class="g-recaptcha" data-sitekey="6Lc37QgTAAAAAHAn5cSxlbIr1zFpakADWkyaVECN"></div>
						</div>
						<hr></hr>
						<div class="form-group">
							<div class="row">
								<div class="col-sm-6">
									<p:selectBooleanCheckbox value="#{loginService.recordarSesion}" />
									<h:outputText value="No cerrar sesión" />
								</div>

								<div class="col-sm-6 text-right">
									<p:commandButton value="Iniciar sesión"
										actionListener="#{loginService.login()}" ajax="false"
										styleClass="btn btn--primario" icon="ui-menuitem-icon ui-icon fa fa-key" iconPos="right" />
								</div>
							</div>
						</div>
						
						<div class="form-group">
							<div class="row">
								<div class="col-sm-12">
									<p:link href="recuperar_password.jsf" styleClass="btn btn-link" value="¿Olvidó su clave?"/>
								</div>
							</div>
						</div>
						<br></br>
					</p:fieldset>
				</p:panel>
			</h:form>
		</div>
		<p:confirmDialog global="true" showEffect="fade" hideEffect="fade" closeOnEscape="true" rendered="true">
			<p:commandButton value="Si" type="button" styleClass="ui-confirmdialog-yes" icon="ui-icon-check" />
			<p:commandButton value="No" type="button" styleClass="ui-confirmdialog-no" icon="ui-icon-close" />
		</p:confirmDialog>

	</ui:define>
	<ui:define name="script">
		<script type="text/javascript" src="resources/javascript/bootstrap.js"></script>
		<script type="text/javascript" src="resources/javascript/app.js"></script>
	</ui:define>
</ui:composition>